<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-wap-web-app-capable" content="yes">
    <meta name="apple-wap-web-app-status-bar-style" content="black-translucent">
    <meta name="MobileOptimized" content="240"/>
    <title>转职业战队</title>
    <link rel="stylesheet" href="$!webPath/css/reset.css" />
    <link rel="stylesheet" href="$!webPath/css/style.css" />
    <link rel="stylesheet" href="$!webPath/css/style_my.css" />
    <script src="$!webPath/js/jquery.min.js"></script>
    <script src="$!webPath/js/city.js"></script>
    <script src="$!webPath/js/jquery.form1.js"></script>
</head>
<body style="background-color:#fff">
<div class="all">

    <div class="teamTop">
        <div class="teamAvatar">
            <form method="post" name="theForm" id="theForm"  enctype="multipart/form-data">
                <div>
                    #if($!team.logoPath)
                    <img id="teamImg" src="$!webPath$!team.logoPath" onclick="imgUpdate()" height="180" width="100%">
                    #else
                    <img id="teamImg" src="$!webPath/imgs/member.jpg" onclick="imgUpdate()" height="180" width="100%">
                    #end
                    <input type="file" name="photo" id="fileImg" style="width: 70px;display: none;">
                    <input type="hidden" name="teamId" value="$!team.id"/>
                    <input type="button" id="btn_update" class="btn_imgupdate" style="display: none;" value="修改"/>
                </div>
            </form>
        </div>

            <div class="teamName">
                <div ><span class="grey">积分排位赛总积分</span> $!team.teamIntegral分 <span class="grey">排名</span> 无</div>
                <div><span class="grey">战队成员</span> $!teamMember.size()/7 $!team.location</div>
            </div>
        </div>
    <form method="post" name="theForm" id="theForm1"  enctype="multipart/form-data">
            <div class="create_team_box">
                <input type="hidden" name="teamId" id="teamId" value="$!team.id"/>
            </div>
            <div class="create_team_box">
                <div class="create_team_text">战队名称</div>
                <input type="text" name="teamName" id="teamname" value="$!team.name" onkeyup="value=value.replace(/[\d]/g,'') " maxlength="8"/>
            </div>
            <div class="create_team_box">
                <div class="create_team_text">队长姓名</div>
                <input type="text" name="leaderName" id="captain" value="$!team.leaderName" onkeyup="value=value.replace(/[\d]/g,'') " maxlength="10" />
            </div>
            <div class="create_team_box">
                <div class="create_team_text" >队长手机</div>
                <input type="text" name="mobile" id="phone" value="$!team.leaderMobile" onkeyup="value=value.replace(/\D/g,'') " maxlength="11"/>
            </div>
            <div class="create_team_box" style="position: relative;left:0;top:0;">
                <div class="create_team_text">所在地</div>
                <select id="province" class="province" style="position: absolute;top:4px;"><option>上海</option></select><select id="city" class="city" style="position: relative;left: 0;top: 4px;"><option>徐汇区</option></select>
            </div>
            <div class="create_team" style="display: none;">
                <div class="create_team_juzhong">
                    <img  src="$!webPath/imgs/warning.png">
                    <p>手机号已存在，请重新输入</p>
                </div>
            </div>
        <input type="hidden" id="location" name="location">
        <div id="div_margin"></div>
    </form>
        <div class="teamFooter">
            <a href="$!webPath/article/proteam_rule?teamId=$!team.id" class="btnB">返回</a>
            <a href="#" class="btnY" onclick="complete()">完成</a>
        </div>
    </div>
    <script>
        var mar_height=$('.teamFooter').css('height');
        $('#div_margin').css('margin-bottom',mar_height);

        function imgUpdate() {
            $('#fileImg').css('display','block');
            $('#btn_update').css('display','block');
        }
        $('#fileImg').change(function(){
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#teamImg");

            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr('src', dataURL);
            } else {
//                dataURL = $file.val();
//                var imgObj = document.getElementById("preview");
//                // 两个坑:
//                // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
//                // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
//                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
//                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
                  alert('不支持图片格式');
            }
        })
        $('#btn_update').click(function () {
            $("#theForm").ajaxSubmit({
                url : "$!webPath/team/uploadTeamLogo",
                type : "post",
                success : function(data) {
                    $('#fileImg').css('display','none');
                    $('#btn_update').css('display','none');
                    alert('修改战队头像成功');
                },
                error : function(data) {
                    alert('失败');
                }
            });
        })
        $('#teamname').blur(function(){
            var teamName=$('#teamname').val();
            $.ajax({
                type:'post',
                url:'$!webPath/team/validate_teamName',
                data:{teamName:teamName},
                success: function () {
                    return teamName;
                },
                error: function () {
                    $('#teamname').attr('placeholder','战队名已经存在');
                }
            })
        })
        $('#phone').blur(function(){
            var phone=$('#phone').val();
            $.ajax({
                type:'post',
                url:'$!webPath/team/validate_mobile',
                data:{mobile:phone},
                success:function(){
                    $('.create_team').css('display','none');
                    return phone;
                },
                error: function () {
                    $('.create_team').css('display','block');
                }
            })
        })
        function complete(){
            var teamname = jQuery('#teamname').val();
            var captain = jQuery('#captain').val();
            var phone = jQuery('#phone').val();
            var location=$('#province option:selected').val()+' '+$('#city option:selected').val();
            if(teamname==''){
                alert('战队名不能为空');
                return false;
            }
            if(captain==''){
                alert('队长名不能为空');
                return false;
            }
            if(phone==''){
                alert('手机号不能为空');
                return false;
            }
            $('#location').val(location);
            $("#theForm1").ajaxSubmit({
                url : "$!webPath/team/saveNewTeam",
                type : "post",
                success : function(data) {
                    window.location.href = "$!webPath/team/apply_for_career2?teamId=$!team.id&captionId=$!team.captionId";
                },
                error : function(data) {
                    alert('失败');
                }
            });
        }
    </script>
</body>
</html>